<template>
  <div id="app">
    <section>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#f7f7f7', color: '#1f6aa1' }"
      >
        <el-table-column type="index" />
        <el-table-column prop="netname" label="网卡名称" />
      
        <el-table-column prop="ip" label="IP地址" />
        <el-table-column prop="mac" label="MAC地址" />
        <el-table-column prop="gateway" label="网关地址" />
        <el-table-column prop="netmask" label="子网掩码" />

        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="success"
              plain
              @click="edit(scope.$index, scope.row)"
            >
              <el-icon> <Edit /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="tableData.length"
        :page-size="pageSize"
      >
      </el-pagination>
    </section>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from "vue";
import requst from "../../http/request";
import { Edit } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
export default {
  components: {
    Edit,
  },
  setup(props, context) {
    const data = reactive({
      tableData: [],
      pageSize: 5,
      rowData: {},
    });
    const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));

    const getNetwork = async () => {
      const list = await requst.getNetwork({
        user_id: userInfo.user_id,
      });
      data.tableData = list.data.data;
      const netname=[];
      list.data.data.forEach(element => {
        netname.push(element.netname)
      });
      //sessionStorage.setItem('netname',JSON.stringify(netname));
    };

    onMounted(getNetwork);
    const router = useRouter();
    const edit = (index, row) => {
      router.push({ name: "setIp", params: { netname: row.netname } });
    };

    const refs = toRefs(data);
    return {
      ...refs,
      edit,
    };
  },
};
</script>

<style lang='scss' scoped>
#app {
  background: #f8f8f8;
  width: 100%;
  padding: 10px;
}
.pagination {
  justify-content: center;
  margin: 20px 0;
}
</style>